
import React from 'react';
import { Comment, Avatar } from 'antd';
import http from '../api/index';
class Nodes extends React.Component {

    render() {
        const { testData } = this.props;
        const Node = (data) => {
            if (!!data.data) {
                return <>
                    {data.data.map((item, index) => (
                        <Comment
                            key={index}
                            actions={[<span className={'reply-to'} >Reply to</span>]}
                            author={<>{item.userNm} <span style={{ color: '#1890ff' }}>@</span> {item.userNm}</>}
                            avatar={
                                <>
                                    <Avatar
                                        style={{ backgroundColor: '#828282', verticalAlign: 'middle' }}
                                        size="large"
                                        gap={3}
                                    >{item.userNm}
                                    </Avatar>
                                </>
                            }
                            content={<>{item.userNm}</>}
                            datetime={<>{item.userNm}</>}
                        >
                            <Node data={item.children} />
                        </Comment>
                    ))
                    }
                </>
            } else {
                return (<></>)
            }
        }
        return (<><Node data={testData} /></>)
    }
};

export default class index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            testData: []
        }
    }
    componentDidMount() {
        window.document.querySelector('.get-focus').addEventListener('click', this.focusEditor.bind(this)) //监听窗口大小改变
        this.getTestDat();

    }
    componentWillUnmount() {
        window.document.querySelector('.get-focus').removeEventListener('click', this.focusEditor.bind(this));
    }
    getTestDat = async () => {
        await http.blog.commentInfo('').then((res) => {
            this.setState((state) => ({
                testData: res.data
            }))
        })
        console.log(this.state.testData)
        console.log(window.document.querySelectorAll('.reply-to'))
    }
    focusEditor = () => {
        window.document.querySelector('.focus-element').focus();
    }
    
    render() {
        const CreateNode = (props) => (<>
            <input className="focus-element" type="tel" />
            <button className="get-focus">{props.buttonNm}</button>
            {/* <Nodes testData={this.state.testData} /> */}
        </>)


        return <CreateNode buttonNm={'123'} />;
    }
};